@baseFontSize: 750;//基于视觉稿横屏尺寸/10得出的基准font-size
.vw(@name, @px){
    @{name}: @px/ @baseFontSize * 100vw;
}
.fontSize(@px){
    font-size: @px/ @baseFontSize * 100vw;
}

.longVw(@name, @a,@b,@c,@d){
    @{name}: (@a / @baseFontSize) * 100vw (@b / @baseFontSize) * 100vw (@c/ @baseFontSize) * 100vw (@d /@baseFontSize) * 100vw;
}

.borderWidth(@name, @a, @color){
    @{name}:(@a / @baseFontSize) * 100vw solid @color;
}
.medium{
    font-weight: bold;
}
html,body{
    width: 100%;
    height: 100%;
    background: #fff;
}

.loading{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 300;
   
    display: none;
    .img{
        .vw(width,100);
        .vw(height,100);
        .vw(padding,40);
        .vw(border-radius,12);
        background: rgba(0, 0, 0, .5);
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        text-align: center;
        .vw(line-height,100);
        
    };
    img{
        .vw(width,100);
        .vw(height,100);
        
    }

}
/* 题目 */
.title-bar{
    width: 100%;
    .vw(width,490);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    .vw(padding-left,130);
    .vw(padding-right,130);
    .vw(height,88);
    .vw(line-height,88);
    .fontSize(36);
    color: #000000;
    position: relative;
    text-align: center;
    background: #FFFFFF;
    box-shadow: inset 0 -1px 0 0 #E9E9E9;
    .left-img{
        .vw(width,88);
        .vw(height,88);
        text-align: center;
        .vw(line-height,88);
        position: absolute;
        left: 0;
        top:0;
        img{
            .vw(width,18);
            .vw(height,30);
        }
    }
    .right-text{
        .fontSize(26);
        .vw(padding-left,22);
        .vw(padding-right,22);
        .vw(height,88);
        text-align: center;
        position: absolute;
        .vw(right,0);
        top:0;
    }
    .blue{
        color: #4A90E2;
    }

}

[v-cloak] {
    display: none !important;
}


/* 签纸贺兑换卡号页 */
.card-number-page{
    display:flex;
    display: -webkit-flex;
    height:100%;
    flex-direction:column;
    .main-content{
        flex: 1;
        width: 100%;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        height: auto;
        position: relative;
        .qzh-logo{
            .vw(padding-top,92);
            .vw(padding-bottom,100);
            text-align: center;
            img{
                .vw(width,222);
                .vw(height,100)
            }
        }
        .card-item{
            .vw(width,600);
            .vw(height,88);
            background: #F0F0F0;
            .vw(border-radius,10);
            margin: 0 auto;
            input{
                background: #F0F0F0;
                .vw(height,56);
                .vw(line-height,56);
                .vw(margin-top,16);
                .vw(margin-left,28);
                .vw(width,474);
                .fontSize(28);

            }
            input:focus{
                -webkit-box-shadow: 0 0 0 1000px #F0F0F0 inset !important;
            }
            input:-webkit-autofill,input:-webkit-autofill:focus{
                -webkit-box-shadow: 0 0 0px 1000px #F0F0F0 inset !important;
                background-color: #F0F0F0;
                transition: background-color 50000s ease-in-out 0s;
                -webkit-transition-delay: 99999s;
                -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
            }
            .scan{
                .vw(width,40);
                .vw(height,40);
                .vw(padding,22);
                img{
                    .vw(width,40);
                    .vw(height,40);
                }
            }
        }
        .password-item{
            .vw(width,600);
            .vw(height,88);
            background: #F0F0F0;
            .vw(border-radius,10);
            margin: 0 auto;
            .vw(margin-top,30);
            input{
                background: #F0F0F0;
                .vw(height,56);
                .vw(line-height,56);
                .vw(margin-top,16);
                .vw(margin-left,28);
                .vw(margin-right,28);
                .vw(width,540);
                .fontSize(28);

            }
            input:focus{
                -webkit-box-shadow: 0 0 0 1000px #F0F0F0 inset !important;
            }
            input:-webkit-autofill,input:-webkit-autofill:focus{
                -webkit-box-shadow: 0 0 0px 1000px #F0F0F0 inset !important;
                background-color: #F0F0F0;
                transition: background-color 50000s ease-in-out 0s;
                -webkit-transition-delay: 99999s;
                -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
            }
        }
        .hint{
            text-align: center;
            color: #aaa;
            .fontSize(24);
            transform: scale(0.95);
            .vw(line-height,64);
            .vw(padding-bottom,36);
        }
        @media screen and (max-width:350px){
            .hint{
                transform: scale(0.9)
                
            }     
        }
        @media screen and (max-width:320px){
            .hint{
                transform: scale(0.8)
                
            }     
        }

        .btn{
            text-align: center;
            input{
                .vw(width,600);
                .vw(height,88);
                color: #fff;
                .fontSize(34);
                background: #FC404A;
                .vw(border-radius,12);
            }
            input:disabled{
                background: #DCDCDC;
            }

        }
        .instructions{
            text-align: center;
            .vw(height,37);
            .vw(line-height,37);
            .vw(padding-top,33);
            .vw(padding-bottom,33);
            color: #aaa;
            .fontSize(26);
            display: flex;
            justify-content: center;
            width: 100%;
            .img{
                .vw(margin-left,8);
                .vw(padding-top,10);
                .vw(width,8);
                img{
                    display: block;
                    .vw(width,8);
                    .vw(height,16);
                }
            }
            

        }
        


    }
    .logo{
        width: 100%;
        .vw(height,80);
        text-align: center;
        img{
            .vw(width,279);
            .vw(height,80);
        }
    }
}
//章程页
.constitution-page{
    display:flex;
    display: -webkit-flex;
    height:100%;
    flex-direction:column;
    .main-content{
        flex: 1;
        width: 100%;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        height: auto;
        background: #f5f5f5;
        h1{
            color:#000000;
            .fontSize(40);
            .vw(line-height,110);
            text-align: center;
            font-weight: bold;
        }
        p{
            .fontSize(26);
            color: #404040;
            .vw(line-height,38);
            .vw(margin-bottom,36);
            .vw(width,700);
            .longVw(padding,0,25,0,25);
            text-align: justify;
           
        }
        .no-bottom{
            .vw(margin-bottom,0);
        }
    
    }

}
//使用说明
.instructions-page{
    display:flex;
    display: -webkit-flex;
    height:100%;
    flex-direction:column;
    .main-content{
        flex: 1;
        width: 100%;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        height: auto;
        img{
            width: 100%;
        }
        .footer{
            position: relative;
            .constitution{
                .vw(width,240);
                .vw(height,52);
                position: absolute;
                .vw(left,328);
                .vw(top,868);
            }
        }

    }


}

//兑换历史页面
.change-history-page{
    display:flex;
    display: -webkit-flex;
    height:100%;
    flex-direction:column;
    .main-content{
        flex: 1;
        width: 100%;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        height: auto;
        background: #f5f5f5;
        .header{
            background: #fff;
            text-align: center;
            .qzhh-logo{
                .longVw(padding,34,0,20,0);
                .vw(height,68);
                img{
                    .vw(width,150);
                    .vw(height,68);
                }
            }
            .name{
                .fontSize(40);
                color: #323232;
                .vw(height,58);
                .vw(line-height,58);
            }
            .date{
                .vw(height,42);
                .vw(line-height,42);
                .fontSize(24);
                color: #323232;
                .vw(padding-bottom,36);   
            }
        }
        .mescroll{
         
            .history{
                .history-item{
                    .vw(width,710);
                    // .vw(height,248);
                    
                    background:#FFFFFF;
                    .vw(border-radius,10);
                    margin: auto;
                    .vw(margin-top,20);
                    .vw(padding-bottom,8);
                    .top{
                        .vw(padding-top,14);
                        .vw(padding-bottom,14);
                        .left{
                            .img{
                                .vw(width,60);
                                .vw(height,60);
                                .vw(border-radius,10);
                                overflow: hidden;
                                .vw(margin-left,24);
                                .vw(margin-right,12);
                                img{
                                  .vw(width,60);
                                  .vw(height,60);
                                }
                            }
                            .name{
                                .fontSize(40);
                                color: #323232;
                                .vw(width,450);
                                .vw(height,60);
                                .vw(line-height,60);
                                overflow: hidden;
                                text-overflow:ellipsis;
                                white-space: nowrap;
                            }
                        }
                        // .right{
                        //     .vw(margin-right,24);
                        //     .text{
                        //         .fontSize(26);
                        //         color: #323232;
                        //         .vw(width,114);
                        //         .vw(height,60);
                        //         .vw(line-height,60);
                        //     } 
                        //     .img{
                        //         .vw(width,8);
                        //         .vw(height,16);
                        //         .vw(padding-top,22); 
                        //         img{
                        //             .vw(width,8);
                        //             .vw(height,16);
                        //             display: block;
                        //         }  
                        //     }
                        // }
                        .right{
                            .vw(margin-right,24);
                            .vw(height,60);
                            display: flex;
                            align-items: center;
                            .text{
                                .fontSize(26);
                                color: #323232;
                                .vw(width,114);
                            } 
                            .img{
                                .vw(width,8);
                                .vw(height,16);
                                img{
                                    .vw(width,8);
                                    .vw(height,16);
                                    display: block;
                                }  
                            }
                        }
                    }
                    .bottom{
                        .vw(width,638);
                        .vw(height,136);
                        background: #F9F9F9;
                        .vw(border-radius,10);
                        margin: 0 auto;
                        .longVw(padding,28,28,0,28);
                        .left{
                            .vw(width,484);
                            .vw(height,136);
                            // .vw(padding-top,14);
                            .name{
                                .vw(height,58);
                                .vw(line-height,58);
                                .fontSize(34);
                                color: #000000;
                            }
                            .date{
                                .vw(height,50);
                                .vw(line-height,50);
                                .fontSize(26);
                                color: #777777;
                            }
                        }
                        .right{
                            .vw(margin-top,34);
                            input{
                                .vw(width,152);
                                .vw(height,54);
                                color: #fff;
                                .fontSize(28);
                                background: #FC404A;
                                .vw(border-radius,27);
                            }
                        }
                    }
    
                    .card-info{
                        .longVw(padding,10,30,0,30);
                        // .vw(height,206);
                        max-height: 0;
                        overflow: hidden;
                        // transition:.4s all;
                        .item{
                            .vw(padding-top,30);
                            .vw(height,58);
                            .vw(line-height,58);
                            .title{
                                .vw(width,86);
                                .vw(height,58);
                                .fontSize(28);
                                color: #000000;
                            }
                            .card{
                                .vw(width,420);
                                .vw(height,58);
                                background: #F5F5F5;
                                text-align: center;
                                color: #6D7278;
                                .fontSize(28);
                                .vw(border-radius,10);
                            }
                            .btn{
                                input{
                                    .vw(width,134);
                                    .vw(height,58);
                                    color: #000;
                                    .fontSize(28);
                                    background: #F5F5F5;
                                    .vw(border-radius,10);
                                }
                            }
    
                        }
                        .item:last-child{
                            .vw(padding-bottom,30);
                        }
    
                    }
    
    
    
    
                }
    
            }
            .upwarp-nodata{
                text-align: center;
                .vw(line-height,100);
                .fontSize(30);
                color: #777777;
            }
        }
   


    }


}
/*兑换页面*/
.exchange-page{
    display:flex;
    display: -webkit-flex;
    height:100%;
    flex-direction:column;
    .main-content{
        flex: 1;
        width: 100%;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        height: auto;

        display:flex;
        display: -webkit-flex;
        flex-direction:column;

        position: relative;

        .ball {
            position: absolute;
            .vw(left,90);
            .vw(bottom,68);
            z-index: 300;
            transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41);
            /*贝塞尔曲线*/
        }
        
        .inner {
            .vw(width,40);
            .vw(height,40);
            border-radius: 50%;
            transition: all 0.4s linear;
            img{
                .vw(width,40);
                .vw(height,40);
            }

        }


        .hint{
            background: #F9F9F9;
            width:100%;
            .vw(height,64);
            .vw(line-height,64);
            .text{
                .vw(width,650);
                .fontSize(24);
                color: #FF5101;
                .vw(padding-left,30);
            }
            .close{
                .vw(padding-top,16);
                .vw(padding-right,30);
                img{
                    .vw(width,30);
                    .vw(height,30);
                    display: block;
                }
            }

        }
        .header{
            width:100%;
            .vw(height,98);
            background: #fff;
            box-shadow: 0 3px 10px 0 rgba(222,222,222,0.50);
            .logo{
                .vw(width,218);
                .vw(height,98);
                text-align: center;
                img{
                    .vw(margin-top,22);
                    .vw(width,120);
                    .vw(height,54);
                    display: inline-block;
                }
            }
            .text{ 
                .vw(line-height,98);
                .vw(padding-left,40);
                .fontSize(36);
                color: #000000;
            }
        }
        // 选择卡区域
        .select-card-content{
            .vw(padding-top,12);

            flex: 1;
            width: 100%;
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
            height: auto;
    
            display: flex;
            justify-content: start;

            .brand-list{
                background: #ededed;
                height: auto;
                overflow-y: scroll;
                overflow-x: hidden;
                -webkit-overflow-scrolling: touch;
                .vw(width,238);
                .borderWidth(border-right, 4, #fff);
                .item{
                    background: #ededed;
                    .vw(width,250);
                   .box{
                        .vw(margin-left,6);
                        .vw(height,80);
                        .vw(width,234);
                        position: relative;

                        display: flex;
                        justify-content: start;
                   }
                    .logo{
                        .vw(width,38);
                        .vw(height,38);
                        .vw(padding-left,20);
                        .vw(padding-top,21);
                        img{
                            .vw(width,38);
                            .vw(height,38);
                            .vw(border-radius,8);
                        }
                    }
                    .brand-name{
                        .vw(width,166);
                        .vw(height,80);
                        .vw(padding-left,10);
                        .fontSize(26);
                        color: #323232;
                        word-break:break-all;
                        display: flex;
                        align-items:center;
                        p{
                            .vw(width,166);
                            .vw(line-height,36);
                            .fontSize(26);
                            color: #323232;
                            word-break:break-all;
                        }
                    }
                    .number{
                        position: absolute;
                        .vw(top,0);
                        .vw(right,0);
                        .vw(width,32);
                        .vw(height,32);
                        border-radius: 50%;
                        .vw(line-height,32);
                        text-align: center;
                        background:#ffb700;
                        .fontSize(24);
                        transform:scale(0.75);
                        -webkit-transform:scale(0.75);  /*兼容-webkit-引擎浏览器*/
                        -moz-transform:scale(0.75);     /*兼容-moz-引擎浏览器*/
                    }

                }
                
                .checked{
                    .box{
                        .longVw(border-radius, 40, 0, 0, 40);
                        background: #fff;
                        box-shadow: -2px 2px 8px 0 #D8D8D8, -1px -2px 8px 0 #D8D8D8 ;
                    }
                   
                 
                }
                .footer-li{
                    .vw(width,240);
                    .vw(min-height,156);
                    background: #ededed;
                }
              
            }
            .brand-list::-webkit-scrollbar {display:none}
            //面值选择
            .brand-content{
                height: auto;
                overflow-y: scroll;
                -webkit-overflow-scrolling: touch;
    
                .vw(width,446);
                .vw(padding-bottom,100);
                .vw(padding-left,30);
                .vw(padding-right,34);
              
                .brand-title{
                    .vw(height,70);
                    .vw(line-height,70);
                    .fontSize(37);
                    color: #FC404A;
                    
                }
                .card-select{
                    .card-item{
                        display: flex;
                        justify-content: space-between;
                        .vw(height,120);
                        .vw(padding-left,20);
                        .borderWidth(border-bottom,1,#f5f5f5);
                        .card-name{
                            .vw(width,258);
                            .vw(line-height,120);
                            .fontSize(28);
                            color: #000000;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            word-break: break-all;
                        }
                        .counter{
                            display: flex;
                            justify-content: end;
                            
                            .sub{
                                .vw(width,42);
                                .vw(height,42);
                                .vw(margin-top,38);
                                img{
                                    .vw(width,42);
                                    .vw(height,42);
                                }
                            }
                            .number{
                                .vw(line-height,120);
                                .vw(padding-left,14);
                                .vw(padding-right,14);
                                .fontSize(28);
                                color: #000000;
                            }
                            .add{
                                .vw(width,42);
                                .vw(height,42);
                                .vw(margin-top,38);
                                img{
                                    .vw(width,42);
                                    .vw(height,42);
                                }
                            }

                        }
                    }
                    .custom-value{
                        .card-item{
                            border: none;
                        }
                        .bottom{
                            .vw(padding-left,20);
                            position: relative;
                            img{
                                .vw(width,36);
                                .vw(height,36);
                                position: absolute;
                                .vw(top,26);
                                .vw(left,290);
                            }

                            input{
                                .vw(width,294);
                                .vw(height,88);
                                .vw(line-height,88);
                                background: #f5f5f5;
                                .vw(border-radius,12);
                                .vw(padding-left,26);
                                overflow: hidden;
                                .fontSize(28);
                            }
                            input:focus{
                                -webkit-box-shadow: 0 0 0 1000px #f5f5f5 inset !important;
                            }
                            input:-webkit-autofill,input:-webkit-autofill:focus{
                                -webkit-box-shadow: 0 0 0px 1000px #f5f5f5 inset !important;
                                background-color: #f5f5f5;
                                transition: background-color 50000s ease-in-out 0s;
                                -webkit-transition-delay: 99999s;
                                -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
                            }
                        }

                    }

                    .disabled{
                        .card-name{
                            color: #A3A1A1;
                        }
                    }


                }

            }

        }

        // 底部菜单栏
        .footer{
            position: absolute;
            .vw(left,0);
            .vw(bottom,0);
            .vw(border-radius,12);
            z-index: 200;
           
            .hint{
                .vw(width,710);
                .vw(height,56);
                .vw(line-height,56);
                .longVw(border-radius,12,12,0,0);
                .fontSize(24);
                color: #FF5101;
                text-align: center;
                background: rgba(0, 0, 0, .15);
                .vw(padding-bottom,12);
                .vw(margin-bottom,-12);
                .vw(margin-left,20);
            }
            .select-menu{
                .vw(width,750);
                .vw(max-height,0);
                .vw(padding-bottom,0);
                overflow: hidden;
                
                background: #fff;

                .title-menu{
                    .vw(margin-left,20);
                    .vw(margin-right,20);
                    .borderWidth(border-bottom,1,#ebe7e7);
                    .vw(height,74);
                    .vw(line-height,74);
                    .title{
                        .vw(width,480);
                        color: #323232;
                        .fontSize(32);
                        .vw(padding-left,20);
                    }
                    .btn{
                        .vw(width,160);
                        .vw(height,74);
                        .vw(padding-right,20);
                        .img{
                            .vw(width,20);
                            .vw(height,24);
                            .vw(padding-top,26);
                            .vw(padding-right,12);
                            img{
                                .vw(width,20);
                                .vw(height,24);
                                display: block;
                            }
                        }
                        .text{
                            .vw(height,74);
                            .vw(line-height,74);
                            .fontSize(24);
                            color: #4A4A4A;
                        }
                    }
                }

                .card-list{
                    .vw(max-height,500);
                    overflow-y: scroll;
                    .card-item{
                        display: flex;
                        justify-content: start;
                        .vw(height,120);
                        .vw(margin-left,20);
                        .vw(margin-right,20);
                        .vw(width,710);
                        .borderWidth(border-bottom,1,#ebe7e7);
                        .logo{
                            .vw(margin-top,28);
                            .vw(margin-left,24);
                            img{
                                .vw(width,100);
                                .vw(height,64);
                                .vw(border-radius,4);
                            }
                        }
                        .name{
                            .vw(width,380);
                            .vw(height,120);
                            .vw(line-height,120);
                            .vw(padding-left,28);
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            word-break: break-all;
                        }
                        .counter{
                            display: flex;
                            justify-content: center;
                            .vw(width,178);
                            .img{
                                .vw(width,42);
                                .vw(height,42);
                                .vw(margin-top,38);
                                img{
                                    .vw(width,42);
                                    .vw(height,42);
                                }
                            }
                            .number{
                                .vw(line-height,120);
                                .fontSize(28);
                                color: #000000;
                                .longVw(padding, 0, 12, 0, 12);
                            }
                        }

                    }
                }



            }
            





            .footer-menu{
                .vw(width,710);
                .vw(height,90);
                background: #FFFFFF;
                .vw(border-radius,12);
                display:flex;
                justify-content: start;
                z-index: 200;
                box-shadow: 0 4px 9px 0 rgba(0,0,0,0.3);
                .vw(margin-left,20);
                .vw(margin-bottom,10);
               
                .left{
                    .vw(padding-left,38);
                    .vw(padding-right,26);
                    position: relative;
                    img{
                        .vw(width,100);
                        .vw(height,100);
                        .vw(margin-top,-28);
                    }
                    .select-number{
                        .vw(height,30);
                        .vw(min-width,30);
                        text-align: center;
                        .vw(line-height,30);
                        background: #ffb700;
                        color: #000;
                        position: absolute;
                        .vw(right,26);
                        .vw(top,-30);
                        .vw(border-radius,15);
                        .fontSize(22);
                    }
                }
                .center{
                    .vw(width,338);
                    .vw(height,90);
                    .vw(line-height,90);
                    .fontSize(30);
                    color: #323232;
                }
                .right{
                    .vw(width,208);
                    .vw(height,90);
                    .vw(line-height,90);
                    input{
                        .vw(width,208);
                        .vw(height,90);
                        background: #F9404A ;
                        .longVw(border-radius, 0, 12, 12, 0);
                        color: #fff;
                        .fontSize(34);
                    }
                    input:disabled{
                        background: #DCDCDC ;
                    }
                }
    
    
            }
        }
       
        // 底部菜单展开
        .footer-unfold{
            background: #fff;
            .longVw(border-radius,12,12,0,0);
            .hint{
                .vw(width,750);
                .vw(padding-bottom,0);
                .vw(margin-bottom,0);
                .vw(margin-left,0);
            }
            .select-menu{
                .vw(max-height,574);
                .vw(padding-bottom,40);
            }
        }
    }

    .shade{
        position: fixed;
        left:0;
        top:0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.5);
        z-index: 10;
        
    }

}
// 